<template>
    <div class="layout">
        <!-- 右侧导航 -->
        <div class="menu">
            <Menu :isCollapse="isCollapse"></Menu>
        </div>
        <!-- 左侧内容 -->
        <div class="content" :class="{small:isCollapse}">
            <Content :isCollapse="isCollapse" @changeShow="changeShow"></Content>
        </div>
    </div>
</template>

<script lang="ts" >
import { defineComponent } from 'vue';

import Menu from '@/views/Menu.vue';
import Content from '@/views/Content.vue';

export default defineComponent({
  components: {
    Menu,
    Content,
  },
  data() {
    return {
      isCollapse: false,
    };
  },
  methods: {
    changeShow() {
      this.isCollapse = !this.isCollapse;
    },
  },
});
</script>

<style lang="scss" scoped>
.layout{
// display: flex;
.menu{
    // width: 200px;
    background-color: #112f50;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
}
.content{
    padding-left: 200px;
    transition: all linear 0.3s;
}
.small{
    padding-left: 64px;
}
}
</style>
